$(() => {
  // 业务1：获取统计数据
  $.ajax({
    type: 'get',
    url: '/admin/data/info',
    success: (res) => {
      // console.log(res)
      // 解构出来所需的数据
      const { totalComment, totalArticle, dayComment, dayArticle } = res
      // 更新到页面中
      $('.scolor00 em').text(totalArticle)
      $('.scolor01 em').text(dayArticle)
      $('.scolor02 em').text(totalComment)
      $('.scolor03 em').text(dayComment)
    },
  })

  // 业务2：折线图
  // 2.1. ajax 获取需要展示的数据
  $.ajax({
    type: 'get',
    url: '/admin/data/article',
    success: (res) => {
      console.log(res.data)
      // 2.2. 处理返回的数据格式
      // const dates = []
      // const counts = []
      // res.date.forEach((item) => {
      //   dates.push(item.date)
      //   counts.push(item.count)
      // })
      // 通过 map 可以简化处理数组的代码
      const dates = res.date.map((item) => item.date)
      const counts = res.date.map((item) => item.count)

      console.log({ dates, counts })
      // 2.3. 调用图表，传入数据展示
      loadEchars(dates, counts)
    },
  })

  function loadEchars(dates, counts) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('curve_show'))

    option = {
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%']
        },
      },
      title: {
        left: 'center',
        text: '日新增文章数',
      },

      xAxis: {
        name: '日',
        type: 'category',
        boundaryGap: false,
        // 🎃：x轴使用数据
        data: dates,
      },
      legend: {
        data: ['新增文章'],
        top: '40',
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {},
        },
        right: 50,
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
      },
      series: [
        {
          name: '新增文章',
          type: 'line',
          smooth: true,
          // symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: '#f80',
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255,136,0,0.39)',
              },
              {
                offset: 0.34,
                color: 'rgba(255,180,0,0.25)',
              },
              {
                offset: 1,
                color: 'rgba(255,222,0,0.00)',
              },
            ]),
          },
          // 🎃：系列图表（y轴）使用数据
          data: counts,
        },
      ],
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
})
